<template>
  <div class="mui-content ">
    <heade background='background' title='优秀课列选评申报详情' v-on:goBack="goBack($event)" color1="color1"></heade>

    <div class="titleWrapper">
      <ul>
        <li v-for="(item,index) in result" :key="index">
          <div class="left"> <span class="span"></span> <span class="span2" v-show="index!=result.length-1"></span></div>
          <div class="middle">{{item.time}}</div>
          <div class="right">{{item.title}}</div>
        </li>
      </ul>
    </div>

    <div class="form"  action="">

      <!--<div class="info" v-for="(item,index) in infoTitle" :key="index">-->
        <!--<div class="infoTitle">{{item.name}}</div>-->
        <!--<input type="text"  v-model="item.model">-->
        <!--<div class="right"></div>-->
      <!--</div>-->
      <div class="info" ><div class="infoTitle">活动名称:</div><input type="text" v-model="activeName"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">论文标题:</div><input type="text" v-model="activeName"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">填报时间:</div><input type="text" v-model="activeName"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle">关键字:</div><input type="text" v-model="activeName"><div class="right"></div></div>
      <div class="info" ><div class="infoTitle ">作者:</div><input type="text" v-model="activeName"><div class="right"></div></div>
      <div class="info" @click.stop="goOut()"><div class="infoTitle " >所属单位:</div>

        <div class="right right1 mui-text-center" id="rr" >
          {{item.texte}}

          <ul id="ul" :style="{display:selec==0?'none': 'block'}">

            <li v-for="(item,index) in selectList1" :key="index" @click.stop="goNone(index)" >{{item.texte}}
            </li>
          </ul>
          <ul id="ul1" :style="{display:selec==0?'none': 'block'}">
            <li v-for="(item2,index) in arr" :key="index" @click.stop="goNone1(index)" >{{item2.texte}}
            </li>
          </ul>
          <ul id="ul2" :style="{display:selec==0?'none': 'block'}">
            <li v-for="(item3,index) in arr2" :key="index" @click.stop="goNone2(index)" >{{item3.texte}}
            </li>
          </ul>

        </div>
      </div>
      <div v-show="!this.selec" class="isShow">

        <div class="info" ><div class="infoTitle">第二作者:</div><input type="text"><div class="right"></div></div>
        <div class="info" ><div class="infoTitle">学段:</div><input type="text"><div class="right"></div></div>
        <div class="info" ><div class="infoTitle">学位:</div><input type="text"><div class="right"></div></div>
        <div class="info info-last"> <div class="infoTitle1">内容简介:</div>
          <textarea id="textarea"></textarea>
        </div>

          <div class="applyVedio">
            <div class="vedioLeft">视频上传：</div>
            <div class="img"></div>
          </div>
          <div class="anction">
            <div class="">1、视频只能上传mp4格式</div>
            <div class="">2、视频大小果如超过1GB转换格式1GB以内再上传</div>
            <div><a href=""> 使用格式转换工具</a></div>
          </div>
          <div class="applyVedio1">
            <img src="../../assets/img/shangchuan.png" alt="">
            <div class="rightWrapper">
              <div>名称：UI和i</div>
              <div>大小：UI和i</div>
              <div>类型：UI和i</div>
            </div>
          </div>

      </div>
      </div>

  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  export default {
    components:{
      heade,
      // Foot
    },
    data(){
      return{
        result:[
          {time:"2018-4-4",title:'开始圣宝1'},
          {time:"2018-4-5",title:'开始圣宝2'},
          {time:"2018-4-6",title:'开始圣宝3'},
          {time:"2018-4-7",title:'开始圣宝4'}
        ],
        selectList:['长的时间看','福达股份',"第三方的"],
        selectList1:[
          {'id':'0','texte':'四川5444444444444444'},
          {'id':'1','texte':'河北'},
          {'id':'2','texte':'广州'},
        ],
        selectList2:[
          {'id':'0','t1id':'0','texte':'成都'},
          {'id':'1','t1id':'0','texte':'眉山'},
          {'id':'2','t1id':'0','texte':'乐山'},
          {'id':'3','t1id':'1','texte':'保定'},
          {'id':'4','t1id':'1','texte':'北京'},
          {'id':'5','t1id':'1','texte':'廊坊'},
          {'id':'6','t1id':'2','texte':'深圳'},
          {'id':'7','t1id':'2','texte':'广西'},
          {'id':'8','t1id':'3','texte':'单位3-单位0'},

        ],
        selectList3:[
          {'id':'0','t2id':'0','texte':'金牛'},
          {'id':'1','t2id':'0','texte':'午后'},
          {'id':'2','t2id':'0','texte':'靖江'},
          {'id':'3','t2id':'1','texte':'仁寿'},
          {'id':'4','t2id':'1','texte':'钟祥'},
          {'id':'5','t2id':'1','texte':'附加'},
          {'id':'6','t2id':'2','texte':'马鞭'},
          {'id':'7','t2id':'2','texte':'峨边'},
          {'id':'8','t2id':'3','texte':'北京1'},

        ],
        infoTitle1:['activeName33','activeTitle44','activeTime','keyWords','author'],
        infoTitle:[
          {name:'活动名称:',model:'activeName'},
          {name:'论文标题:',model:'activeTitle'},
          {name:'填报时间:',model:'activeTime'},
          {name:'关键字:',model:'keyWords'},
          {name:'作者:',model:'author'},
        ],
        unit:'全部',
        selec:0,
        item:'',
        arr:[],
        arr2:[],
        aaa:'',
        activeName:'',
        activeTitle:'',
        activeTime:'',
      }
    },
     created(){
      let me=this;
       this.$zcServer.Post({
         IsNeedLogin: 'false',
         Paras:{
           Name:'Vue_CourseResource',
           action:"Ext_EvaluationCollection",
           Data:{

           }
         },
         Callback:me.cb_myApply,
         Scope:me,
       });
    },
    methods:{

      test(){
        console.log(this.activeName)
      },
      goBack(){

        // this.$router.push('/Index')
        // this.$router.go(-1)
      },
      onSubmit(){
        alert('提交')
      },
      onSubmit2(){
        // alert('保存')

        console.log(this.aaa)
        // console.log(this.activeTitle)
      },
      goOut(){
        this.item='';
        this.arr=[];
        this.arr2=[];
        this.selec=!this.selec
      },
      goNone(index){
        let arr=[];
        // let arr2=[];
        this.selectList2.forEach((selct2)=>{
          if(selct2.t1id===this.selectList1[index].id){
            arr.push(selct2)
          }
          this.arr=arr;
          return this.arr
        })
      },
      goNone1(index){
        // console.log(this.arr)
        let arr2=[];
        this.selectList3.forEach((selct3)=>{
          console.log(this.selectList2[index].id)
          if(selct3.t2id===this.arr[index].id){
            arr2.push(selct3)
          }
          this.arr2=arr2;
          // return this.arr2
        })

      },
      goNone2(index){
        this.item=this.arr2[index];
        this.selec=!this.selec;
        this.arr=[];
        this.arr2=[]
      }
    },
    /*回调函数*/
    cb_myApply(resJson,scope){
      console.log(resJson)
    }


  }
</script>
<style scoped>
  .mui-content .titleWrapper ul{
    margin-top: 10px;
  }
.mui-content .titleWrapper ul li{

display: flex;
  width: 100%;
  background-color: white;
  height: 50px;
  line-height: 50px;
  color:grey;
  font-size: 14px;

}
.mui-content .titleWrapper ul li .left{
  /*width: 10%;*/
  flex:  0 0 40px;
  position: relative;
  /*width: ;*/

}
.mui-content .titleWrapper ul li .left .span{
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color:rgba(93, 194, 240, 1);
  position: absolute;
  left: 12px;
  top: 19px;
  z-index: 2;
}
.mui-content .titleWrapper ul li .left  .span2{
  position: absolute;
  width: 1px;
  height: 50px;
  background-color:rgba(178, 215, 234, 1);
  left: 18px;
  top:20px;

  z-index: 1;
}
.mui-content .titleWrapper ul li .middle{
  width: 20%;
}
.mui-content .titleWrapper ul li .right{
  width: 45%;
}

  .mui-content .form{
    margin-top: 10px;
  }
  .mui-content .info{
    height: 40px;
    line-height: 40px;
    background-color: white;
    border-bottom: 1px solid gainsboro;
    padding-left: 2%;
    display: flex;
  }
  .mui-content .info .infoTitle{
    width: 22%;
  }
  .mui-content .info-last{
    border-bottom: none;
    height: 70px;
    background-color: white;

  }
  .mui-content .info .infoTitle1 {
    width: 22%;
    font-size: 14px;
    border-bottom: none;
  }
  .mui-content .info input{
    width: 70%;
    border: none;
    height: 38px;
    line-height: 38px;
    margin-bottom: 0px;
  }
  .mui-content .info .right{
    width: 8%;
  }
  .mui-content .info .right1{
    width: 70%;
    text-align: center;
    z-index: 99;
    position: relative;
  }
  .mui-content .info .right1 ul{
    margin-top: 38px;
    display: inline-block;
    float: left;
    width: 33%;
    overflow: hidden;
  }
  .mui-content .info .right1 ul li {
    height: 38px;
    line-height: 38px;
    overflow: hidden;
  }

  .mui-content .isShow{
    margin-top: 10px;
  }
  #textarea{
    width:80%;
    min-height:70px;
    margin-bottom: 0px;
    padding: 3px;
    border: none;
    outline: 0;
    font-size: 14px;
    line-height: 24px;
  }

  .mui-content .applyVedio{
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    /*color: #8f8f94;*/
    background-color: white;
    margin-top: 10px;
  }
  .mui-content .applyVedio .vedioLeft{
    padding-left: 2%;
    float: left;
  }
  .mui-content .applyVedio .img{
    margin-right: 2%;
    float: right;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 10px;
  }
  .mui-content .anction{

    padding:3% 2% ;
    font-size: 14px;
    color: #8f8f94;
  }
  .mui-content .applyVedio1{
    display: flex;
    width: 100%;
    padding: 5%;
    background-color: white;
  }
  .mui-content .applyVedio1 img{
    width: 50px;
    height: 50px;
  }
  .mui-content .applyVedio1 .rightWrapper{
    margin-left: 3%;
font-size: 14px;
  }



</style>
